<template>
	<view style="width: 100%;height: 100vh;background-color: #F3F4F5;position: relative;">
		<view class="top">
			<view class="jf">
				{{dataObj.point}}
			</view>
			<view class="rhz" @click="$linkTo('./web_view/web_view?url='+dataObj.point_info)">
				如何赚积分？
			</view>
		</view>
		<view class="tabBox flex_r_between">
			<view class="item" :class="{cc:type==index}" v-for="(item,index) in tabList" :key="index" @click="type=index">
				<view style="height: 80%;">
					{{item}}
				</view>
				<view class="line" v-show="type==index"></view>
			</view>
		</view>
		<scroll-view class="list" scroll-y="true" refresher-enabled="false" :refresher-triggered="triggered"
		 :refresher-threshold="100" refresher-background="#F3F4F5" @refresherpulling="onPulling" @refresherrefresh="onRefresh"
		 @refresherrestore="onRestore" @refresherabort="onAbort">
			<view class="listItem flex_r_between" v-for="(item,index) in listArr" :key="index">
				<view class="je">{{item.is_minus==1?'-':'+'}}{{item.amount}}</view>
				<view class="r flex_r_between">
					<view class="wc">{{item.title}}</view>
					<view class="time">{{$dateFormat(item.date_add*1000),'Y-m-d H:i:s'}}</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				triggered:false,
				type: 0,
				tabList: [
					'全部记录',
					'获得积分',
					'使用积分'
				],
				dataObj:null,
				listArr:[],
			};
		},
		watch:{
			type:function(val,oldVal){
				if(val!==oldVal){
					this.$request('/app/user/pointRecord','post',{
						access_token:uni.getStorageSync('access_token').replace(/^\"|\"$/g,''),
						type:this.type
					}).then(res=>{
						this.listArr=res.content
					})
				}
			}
		},
		onLoad() {
			// this._freshing = false;
			// setTimeout(() => {
			// 	this.triggered = true;
			// }, 1000)
			this.getMyPoints()
		},
		methods: {
			getMyPoints(){
				this.$request('/app/user/myPoint','post',{
					access_token:uni.getStorageSync('access_token').replace(/^\"|\"$/g,'')
				}).then(res=>{
					this.dataObj=res.content
					this.listArr=res.content.points
				})
			},
			onPulling(e) {
				console.log("onpulling", e);
			},
			onRefresh() {
				if (this._freshing) return;
				this._freshing = true;
				setTimeout(() => {
					this.triggered = false;
					this._freshing = false;
				}, 3000)
			},
			onRestore() {
				this.triggered = 'restore'; // 需要重置
				console.log("onRestore");
			},
			onAbort() {
				console.log("onAbort");
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import url("@/static/css/flex.css");

	.list {
		position: absolute;
		top:410rpx;
		bottom: 0;
		.listItem {
			height: 120rpx;
			background-color: #fff;
			padding: 0 40rpx;
			box-sizing: border-box;
			border-bottom: 1px solid #DDDDDD;
			.je {
				font-size: 36rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #DB1B22;
				width: 20%;
			}

			.r {
				width: 80%;

				.wc {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #111111;

				}

				.time {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #9DA5A8;

				}
			}
		}
	}

	.tabBox {
		width: 100%;
		height: 80rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 0px 0px #DDDDDD;

		.item {
			width: 33.33333%;
			height: 100%;
			text-align: center;
			font-size: 26rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 400;
			color: #111111;
			line-height: 80rpx;

			.line {
				width: 78rpx;
				height: 4rpx;
				background: #DB1B22;
				border-radius: 2rpx;
				margin: auto;
			}
		}

		.cc {
			font-weight: 500;
		}
	}

	.top {
		width: 100%;
		height: 320rpx;
		background: #DB1B22;
		text-align: center;
		padding-top: 64rpx;
		box-sizing: border-box;

		.jf {
			font-size: 100rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			margin-bottom: 22rpx;
		}

		.rhz {
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			text-decoration: underline;
		}
	}
</style>
